<template>
<div>
  <h1>App根组件</h1>
</div>
<hr>
<!-- 通过属性绑定的形式为表格指定数据源 -->
<MyTable :data="goodslist">
<!-- 具名插槽，为MyTable.vue组件指定标题名称 -->
<!-- 表格的标题 -->
<template #header>
  <th>#</th>
  <th>商品名称</th>
  <th>价格</th>
  <th>标签</th>
  <th>操作</th>
</template>
<!-- 表格每行的单元格 -->
<!-- 这里的row,index来自于子组件传递过来的数据 -->
<template #body="{row,index}">
<td>{{index+1}}</td>
<td>{{row.goods_name}}</td>
<td>￥{{row.goods_price}}</td>
<td>
  <!-- 基于当前行的inputVisible，来控制input和button的按需展示 -->
  <!-- 
    1.v-focus为自定义事件
    2.input输入框的值进行双向绑定
    3.@blur 监听文本框的 blur 事件，在触发其事件处理函数时，把 当前行的数据 传递进去：
   -->
  <input type="text" class="form-control form-control-sm ipt-tag" 
  v-if="row.inputVisible" 
  v-focus 
  v-model.trim="row.inputValue" 
  @blur="onInputConfirm(row)" 
  @keyup.enter="onInputConfirm(row)" 
  @keyup.esc="row.inputValue=''">
  <button type="button" class="btn btn-primary btn-sm" v-else @click="row.inputVisible=true">+Tag</button>
  <span class="badge badge-warning ml-2" v-for="item in row.tags" :key="item">{{item}}</span>
</td>
<td>
  <button type="button" class="btn btn-danger btn-sm" @click="onRemove(row.id)">删除</button>
</td>
</template>
</MyTable>
</template>

<script>
import MyTable from './components/my-table/MyTable.vue';
export default{
  name:'MyApp',
  data(){
    return{
      // 商品列表数据
      goodslist:[]
    }
  },
  methods: {
    // 初始化商品列表的数据
    async getGoodsList(){
      // 发起ajax请求
      const {data:res} = await this.$http.get('/api/goods');
      // 请求失败
      console.log(res)
      if(res.data==0){
        return console.log('获取商品列表失败！');
      }
      // 请求成功赋值
      this.goodslist=res.data;
    },
    // 根据id删除商品的信息
    onRemove(id){
      this.goodslist=this.goodslist.filter(x=>x.id!==id)
    },
    onInputConfirm(row){
      // 1.把用户在文本框中输入的值，预先转存到常量val中
      const val=row.inputValue;
      // 2.清空文本框的值
      row.inputValue='';
      // 3.隐藏文本框
      row.inputVisible=false;
      // 1.1判断val的值是否为空，如果为空，则不进行添加
      // 1.2判断val的值是否已经存在于tags数组中，防止重复添加
      if(!val||row.tags.indexOf(val)!==-1){
        return
      }
      // 2.将用户输入的内容，作为新标签push到当前行的tags数组中
      row.tags.push(val);
    }
  },
  created() {
    // 声明created生命周期函数，调用getGoodsList方法
    this.getGoodsList();
  },
  // 注册MyTable组件
  components:{
    MyTable,
  },
  directives:{
    // 封装自动获得焦点的指令
    focus(el){
      el.focus()
    }
  }
}
</script>

<style lang="less" scoped></style>